<template>
  <el-dialog :title="dialogTitle" @close="dialogClose" :visible="dialogVisible">
    <!-- 表单 -->
    <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
      <el-form-item label="头像">
        <el-upload class="uploadAvatar" 
          ref="uploadAvatar"
          action="https://chst.vip/students/uploadStuAvatar" 
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar" 
          :limit="limit"
          name="headimgurl"
          :file-list="headimgList"
          :multiple="false">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      
      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <!-- 确定&取消按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="HIDE_DIALOG">取消</el-button>
      <el-button type="primary" @click="confirmClick('addStuRuleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  //引入发起请求的api
  import * as api from "../../api";
  //引入辅助函数
  import {mapState,mapMutations,mapActions} from "vuex";
  
  export default {
    data(){
        return{
            showAvatar:true,
            headimgList:[], //回显的头像
            limit:1, //上传文件的数量
            stuRules:{
                name:[
                    {required:true,message:"请输入名字",trigger:"blur"}
                ],
                class:[
                    {required:true,message:"请输入班级",trigger:"blur"}
                ],
                degree:[
                    {required:true,message:"请输入学历",trigger:"blur"}
                ],
                city:[
                    {required:true,message:"请输入城市",trigger:"blur"}
                ],
                productUrl:[
                    {required:true,message:"请输入项目地址",trigger:"blur"}
                ],
                age:[
                    {required:true,message:"请输入年龄",trigger:"blur"}
                ],
                description:[
                    {required:true,message:"请输入描述",trigger:"blur"}
                ]
            },
            stuForm:{
                name:"",
                productUrl:"",
                headimgurl:"",
                class:"",
                age:"",
                city:"",
                degree:"",
                description:""
            },
            oldForm:{} //储存stuForm的初始值，便于后续清空dialog内容

        }

    },
    created(){
        //储存stuForm的初始值，便于后续清空dialog内容
        this.oldForm = {...this.stuForm}
    },
    computed:{
        ...mapState(["dialogVisible","dialogTitle","currentRow"])

    },
    methods:{
      ...mapMutations(["SHOW_DIALOG","HIDE_DIALOG","CHANGE_DIALOG_TITLE"]),
      ...mapActions(["GET_STULIST"]),
      dialogClose(){//dialog框右上角的叉叉
        //关闭dialog
        this.HIDE_DIALOG()
        //清空输入框的值
        this.stuForm = this.oldForm
        //清空头像回显的数组（动画）
        this.headimgList = []
        this.limit = 1

      },
      confirmClick(formName){
        this.$refs[formName].validate((valid)=>{
          if(valid){//表单校验成功
            //关闭dialog
            this.HIDE_DIALOG()
            //发送请求 判断dialogTitle是增加还是编辑
            if(this.dialogTitle==="增加学员信息"){
              //发起增加请求
              console.log(this.stuForm); //dialog中收集到的用户数据
              api.addStuApi(this.stuForm)
              .then(res=>{
                console.log(res);
                if(res.data.state){//增加成功
                  //重新发起请求 更新表格内容
                  this.GET_STULIST()
                  this.$message.success("增加成功")
                }else{//增加失败
                  this.$message.error("增加失败")

                }
              })

            }else{
              //发起编辑请求
              api.updateStuApi(this.stuForm)
              .then(res=>{
                console.log(res);
                if(res.data.state){
                  //修改成功，更新视图
                  this.GET_STULIST()
                  this.$message.success("修改成功")
                }else{
                  this.$message.error("更新失败,没有做任何修改,或者数据不存在")
                  this.GET_STULIST() //更新数据
                }
              })

            }

          }else{
            this.$message.error("请将内容填写完整")
          }
        })

      },
      uploadSuccess(r){
        console.log(r);
        //把返回的图片地址，添加给stuForm 传给服务器 保存到数据库
        if(r.state){
          this.stuForm.headimgurl = r.headimgurl
          if(this.dialogTitle==="编辑学员信息"){
            setTimeout(() => {
            //把headimgList列表内容设为当前项
            this.headimgList = [{url:r.headimgurl}]
          }, 1000);
          }
        }else{
          this.$message.error("上传失败")
        }


      },
      removeAvatar(r){

      }

    },
    watch:{
      currentRow(newVal){
        console.log(newVal);
        //如果dialogTitle是编辑学员信息 那么就要回显数据
        //数据回显，从vuex中获取当前回显的数据
        console.log(this.stuForm);
        console.log(this.currentRow);
        this.stuForm = this.currentRow
        //回显头像
        this.headimgList = [{url:this.currentRow.headimgurl}]
        //编辑的时候，limit变成2
        this.limit = 2
        
      }
    }


  }
</script>
<style scoped lang="less">
.uploadAvatar{
  text-align:left;
}

.el-upload--picture-card i{
  vertical-align:top;
  line-height:148px;
}
</style>
